<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>路由</title>
	</head>
	<body>
		
		<div id="app">
			<!-- 1.router-link被编译之后会转化为为a标签 
			2.关键字to被编译后转化为href属性
			-->
			<router-link to="/user">用户</router-link>
			<router-link to="/dog">狗狗</router-link>
			<!-- 3.指定路由的填充位置 未来展现组件信息
			填充的位置被解析值后,就是一个div
			-->
			<router-view></router-view>
			
		</div>	
		
		<template id="userTem">
			<div id="">
				<h2>用户信息</h2>
			</div>
		</template>
		
		<template id="dogTem">
			<div id="">
				<h2>dog信息</h2>
			</div>
		</template>	
		<!-- 引入JS文件 -->
		<script src="../js/vue.js"></script>
		<script src="../js/vue-router.js"></script>
		<script>
			/* 4.准备组件,定义路由对象 */
			let dogCom = {
				template: "#dogTem"
			}
			let userCom = {
				template: "#userTem"
			}
			//定义路由对象
			// routes 路由的多个映射通过该属性进行定义
			//路由中没有转发,只有重定向
			let vueRouter = new VueRouter({
				routes: [
					{path:"/",redirect:"/dog"},
					{path:"/user",component:userCom},
					{path:"/dog",component:dogCom}
				]
			})
			const app = new Vue({
				el:	"#app",
				data: {
				},
				//实现路由的挂载
				router:vueRouter
			})
		</script>
	</body>
</html>